<template>
  <div class="box">
      <main>
          <router-view></router-view>
      </main>
      <footer>
          <router-link v-for="item in list" :key="item.id" :to="item.toPath">{{item.name}}</router-link>
      </footer>
  </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    name:"首页",
                    id:1,
                    toPath:"/index/shou"
                },
                {
                    name:"我的",
                    id:2,
                    toPath:"/index/my"
                }
            ]
        }
    }

}
</script>

<style lang="scss">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#app,html,body{
    width: 100%;
    height: 100%;
}
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    main{
        flex: 1;
        overflow-y: auto;
    }
    footer{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        a{
            color: #000;
            text-decoration: none;

        }
        .router-link-active{
            color: rgb(3, 173, 46);
        }
    }
}
</style>